<template>
  <div class="view-fill">
    <div v-if="!showModify.visible" class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        :btn-list="btnList"
        :title="title"
        @returnBack="returnBack"
      >
        <template v-slot:full-button>
          <PopoverPrint
            ref="popoverShow"
            v-model:popoverVisible="popoverVisible"
            :canPrint="$permission('deviceMaintenanceDetailPlan:print')"
            :templateArr="templateArr"
            @tempClick="tempClick"
            @print="print"
          ></PopoverPrint>
          <!-- <el-button v-if="canPrint" @click="print">打印</el-button>
          <el-button v-if="canExcel" @click="exportExcel">导出excel</el-button> -->
          <el-button v-if="canUpdate" @click="update">修改</el-button>
        </template>

        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="baseInfoList">
              <template v-slot:basic-crycle>
                <div v-if="baseInfoList.data.crycle">
                  {{
                    baseInfoList.data.crycle + baseInfoList.data.crycleTypeValue
                  }}
                </div>
                <span v-else>-</span>
              </template>
              <template v-slot:basic-remindTime>
                <div v-if="baseInfoList.data.remindTime">
                  {{
                    '任务开始前' +
                    baseInfoList.data.remindTime +
                    baseInfoList.data.remindValue
                  }}
                </div>
                <span v-else>-</span>
              </template>
              <template v-slot:basic-remindTask>
                <div v-if="baseInfoList.data.remindTaskTime">
                  {{
                    '任务开始前' +
                    baseInfoList.data.remindTaskTime +
                    baseInfoList.data.remindTaskValue
                  }}
                </div>
                <span v-else>-</span>
              </template>
              <template v-slot:basic-filePathList>
                <span v-if="baseInfoList.data.filePathList">
                  <ele-gallery
                    :lazy="true"
                    :size="150"
                    :source="baseInfoList.data.filePathList"
                    title="附件"
                  ></ele-gallery>
                </span>
                <span v-else>-</span>
              </template>

            </basic-information>
          </div>
        </div>

        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <p>资产信息</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="assetInfoList"> </basic-information>
          </div>
        </div>

        <div class="model-panel model-panel-left">
          <div class="model-panel-title">
            <Tooltip :text="'养护项目'" />
          </div>
          <div class="model-panel-body">
            <div class="flex_full_item">
              <!-- 表格 -->
              <page-table
                :refresh="itemsTableInfo.refresh"
                :init-curpage="itemsTableInfo.initCurpage"
                v-model:data="itemsTableInfo.data"
                :api="itemsTableInfo.api"
                :pager="false"
                :check-box="false"
                :tab-index="true"
                :query="itemsTableInfo.query"
                :field-list="itemsTableInfo.fieldList"
                :isDynamic="true"
                @handleEvent="handleEvent"
              />
            </div>
          </div>
        </div>

        <chose-printer
          :visible="printerInfo.visible"
          @callBack="handlePrinterCallBack"
        />
      </NewFullScreen>
    </div>
    <modify
      v-if="showModify.visible"
      :id="id"
      v-model:visible="showModify.visible"
      @returnModify="modifyCallback"
    ></modify>
  </div>
</template>

<script setup name="deviceMaintenancePlanDetails">
import BasicInformation from '@/components/BasicInformation/index'
import {
  getDeviceMaintenancePlanById,
  printDeviceMaintenancePlanDetail,
  getDeviceMaintenancePlanDetailList,
} from '@/api/repair'
import { assetCodePrint, exportAssetCardDetail } from '@/api/core'
import PageTable from '@/components/PageTable'
import chosePrinter from '@/components/ChosePrinter'
import { fatchTemplateByCode } from '@/api/base'
import Modify from '@/views/repair/repairManage/deviceMaintenancePlan/modify.vue'
import { doPrint } from '@/utils/exportUtil.js'
import { selectByCodeAndDept } from '@/api/report.js'
import { updatePrintCount } from '@/api/mapping'
const EleGallery = defineAsyncComponent(() =>
  import('@/components/UploadImg/eleGallery')
)

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const Tooltip = defineAsyncComponent(() => import('@/components/Tooltip/index'))

const props = defineProps(['visible', 'id'])

const title = ref('养护计划详情')
const btnList = ref([])
const printerInfo = reactive({
  visible: false,
  data: {},
})

//基础信息
const baseInfoList = reactive({
  data: [],
  fieldList: [
    {
      label: '计划编号',
      value: 'orderNo',
      type: 'text',
    },
    {
      label: '计划组名称',
      value: 'name',
      type: 'text',
    },
    {
      label: '养护类型',
      value: 'typeValue',
      type: 'text',
    },
    {
      label: '养护周期',
      value: 'crycle',
      type: 'slot',
    },
    {
      label: '养护负责人',
      value: 'maintenancePrincipalValue',
      type: 'text',
    },
    {
      label: '下个执行日期',
      value: 'nextExecuteDate',
      type: 'text',
    },
    {
      label: '计划开始日期',
      value: 'planStartDate',
      type: 'text',
    },
    {
      label: '计划终止日期',
      value: 'planEndDate',
      type: 'text',
    },
    {
      label: '提醒于',
      value: 'remindTime',
      type: 'slot',
    },
    {
      label: '任务创建于',
      value: 'remindTask',
      type: 'slot',
    },
    {
      label: '计划状态',
      value: 'statusValue',
      type: 'text',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
    },
    {
      label: '附件',
      value: 'filePathList',
      type: 'slot',
      className: 'not-br',
    },

  ],
})
const assetInfoList = reactive({
  data: [],
  fieldList: [
    {
      label: '资产名称',
      value: 'assetName',
      type: 'text',
    },
    {
      label: '资产卡片号',
      value: 'assetCode',
      type: 'text',
    },
    {
      label: '资产状态',
      value: 'assetStatusValue',
      type: 'text',
    },
    {
      label: '状态值',
      value: 'assetStateValue',
      type: 'text',
    },
    {
      label: '规格',
      value: 'standard',
      type: 'text',
    },
    {
      label: '使用部门',
      value: 'useDeptName',
      type: 'text',
      show: true,
    },
    {
      label: '仓库',
      value: 'depotName',
      type: 'text',
      show: false,
    },
  ],
})

//养护资产
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],

  fieldList: [],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [],
  },
})
// 派单记录
const itemsTableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  api: getDeviceMaintenancePlanDetailList,
  data: [],
  query: {
    orderId: props.id,
    sort: 'create_time desc',
  },
  fieldList: [
    {
      label: '养护部位',
      value: 'maintenanceParts',
    },
    {
      label: '养护内容与要求',
      value: 'contentRequire',
    },
  ],
})

// 过滤相关配置
const customFilterInfo = reactive({
  query: {
    queryMap: {
      id: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: props.id,
      },
    },
    queryParams: {
      // isAssetAchievesExcel: "true",
    },
  },
})
const showModify = reactive({
  title: '修改',
  type: 'update',
  visible: false,
  currentAccountingInterval: '',
})

//选择维修人员
const selectRepairUserInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {
    // idNotIn: "",
  },
})
const filterInfo = reactive({
  query: {
    queryMap: {
      orderId: {
        queryType: 'EQUALS',
        queryCategory: 'AND',
        value: props.id,
      },
    },
    queryParams: {},
    customizeUserVO: {},
  },
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

const canPrint = computed(() => {
  return (
    proxy.$permission('deviceMaintenancePlan:print') &&
    baseInfoList.data.status !== 1
  )
})
const canExcel = computed(() => {
  return (
    proxy.$permission('deviceMaintenancePlan:excel') &&
    baseInfoList.data.status !== 1
  )
})
const canUpdate = computed(() => {
  return (
    proxy.$permission('deviceMaintenancePlan:update') &&
    baseInfoList.data.status === 0 &&
    baseInfoList.data.maintenanceOrgId === undefined
  )
})

watch(
  () => props.visible,
  (newVal) => {
    showDialog.value = newVal
  },
  {
    immediate: true,
  }
)

onMounted(() => {
  getDetails()
})

// 编辑
function update() {
  showModify.visible = true
  showModify.title = '修改养护计划'
}
function modifyCallback() {
  getDetails()
}

function printAssetCode() {
  const data = []
  data.push(baseInfoList.data.id)
  assetCodePrint(data).then((res) => {
    if (res && res.success) {
      printerInfo.visible = true
      printerInfo.data = res.data
    }
  })
}

function exportExcel() {
  exportAssetCardDetail(customFilterInfo.query).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
//打印
const templateArr = ref([])
const popoverVisible = ref(false)
//打印
function print() {
  selectByCodeAndDept({
    tempCode: 'deviceMaintenancePlanDetail',
    deptId: props.deptId,
  }).then((res) => {
    if (res && res.success) {
      templateArr.value = res.data
      popoverVisible.value = true
      // 一条数据则直接打印
      if (templateArr.value.length === 1) {
        proxy.$refs.popoverShow.hidePopover()
        doPrint({
          name: templateArr.value[0].ureportName,
          params: {
            applicationId: props.id,
            orderId: props.id,
            orderNo: props.orderNo,
          },
          callback: printCallback,
          data: {},
        })
      }
    }
  })
}
function printCallback() {}
function tempClick(item) {
  doPrint({
    name: item.ureportName,
    params: {
      applicationId: props.id,
      orderId: props.id,
      orderNo: props.orderNo,
    },
    callback: printCallback,
    data: {},
  })
  popoverVisible.value = false
}

function handlePrinterCallBack(printer) {
  if (printer !== false) {
    proxy.$print.buildRenderBarCode(printerInfo.data, printer)
  }
  printerInfo.visible = false
}
function returnBack() {
  emit('returnBack', false)
}

// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
function showFieldListItem(show, nameValue) {
  let fieldList = assetInfoList.fieldList
  fieldList.forEach((item) => {
    if (nameValue === item.value) {
      item.show = show
    }
  })
}
function getDetails() {
  getDeviceMaintenancePlanById(props.id).then((resp) => {
    if (resp && resp.success) {
      baseInfoList.data = resp.data
      assetInfoList.data = resp.data
      if (resp.data.assetStatus === 1) {
        showFieldListItem(false, 'depotName')
        showFieldListItem(true, 'useDeptName')
      } else if (resp.data.assetStatus === 3) {
        showFieldListItem(true, 'depotName')
        showFieldListItem(false, 'useDeptName')
      }
      itemsTableInfo.data = resp.data.deviceMaintenancePlanDetailVOList
      getItemsList()
    }
  })
}
function getItemsList() {
  itemsTableInfo.refresh = Math.random()
}
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  padding: 0 2px !important;
  box-sizing: border-box;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px !important;
}
// .model-panel-left {
//   width: 73%;
//   float: left;
//   margin-right: 10px;
// }
// .model-panel-right {
//   width: 25%;
// }
</style>
